<script lang="ts" setup>
	interface Column {
		title : string
		dataIndex : string
	}
	withDefaults(defineProps<{ columns ?: Column[], data ?: any[] }>(), {
		columns: [] as any,
		data: [] as any
	})
</script>

<template>
	<table class="um-table">
		<tr>
			<th :key="item.dataIndex" v-for="item in columns">{{item.title}}</th>
		</tr>
		<tr :key="key" v-for="(record,key) in data">
			<td :key="key" v-for="(column, key) in columns">
				<template v-if="$slots[column.dataIndex]">
					<slot :name="column.dataIndex" :record="record"></slot>
				</template>
				<template v-else>
					<view>{{record[column.dataIndex]}}</view>
				</template>
			</td>
		</tr>
	</table>
</template>

<style lang="scss" scoped>
	.um-table {
		border-collapse: collapse;
		width: 100%;

		th,
		td {
			border: 1px solid #f5f5f5;
			padding: 12rpx 20rpx;
			text-align: center;
		}
	}
</style>